<div class="write-post-container" [@fadeIn]="'active'">
    <form #writePostForm="ngForm" role="form" (ngSubmit)="writePostForm.form.valid&&doCommit()" novalidate>
        <div class="row mb-3">
            <div class="col-md-12">
                <input required minlength="2" maxlength="32" name="title" #title="ngModel" [(ngModel)]="post.title"
                    type="text" class="form-control"
                    [ngClass]="{ 'is-invalid': writePostForm.submitted && !title.valid }" placeholder="标题，2到32个字符">
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-12">
                <ckeditor [(ngModel)]="post.content" [editor]="Editor" name="content" #content="ngModel"
                    (ready)="onReady($event)" class="editor-container"
                    [ngClass]="{ 'is-invalid': writePostForm.submitted && !content.valid }">
                </ckeditor>
            </div>
        </div>
        <!-- Mock 环境下不显示验证码，也不提交数据。-->
        <div *ngIf="!isMock">
            <div class="row mb-3">
                <div class="col-md-12">
                    <input required maxlength="4" [(ngModel)]="post.captcha" name="captcha" #captcha="ngModel"
                        type="text" class="form-control"
                        [ngClass]="{ 'is-invalid': writePostForm.submitted && !captcha.valid }" placeholder="至少1位，最多4位"
                        autocomplete="off">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-12">
                    <captcha></captcha>
                </div>
            </div>
        </div>
        <button type="submit" [disabled]="writePostForm.invalid" class="btn btn-primary">提交</button>
    </form>
</div>